<template>
  <span>
      <div class="l-content">
        <el-button @click="changeAsideStatus">
          <i class="el-icon-s-operation"></i>
        </el-button>
        <span>{{TabTitles}}</span>
      </div>
      <div class="r-content">
        <el-dropdown>
          <span class="el-dropdown-link">
            <img :src='hearderImg' class="hearderImg">
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>个人中心</el-dropdown-item>
            <el-dropdown-item @click.native="loginout">
                  退出
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </span>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》'
import store from '@/store/index'

export default {
//import引入的组件需要注入到对象中才能使用
components: {},
props: {},
data() {
//这里存放数据
return {

};
},
//计算属性 类似于data概念
computed: {
  hearderImg(){
    return store.state.common.adminImg
  },
  TabTitles:{
    get(){
      let tabTitle = []
      let onRouteName = this.$route.name
      let allRoutes = this.$router.options.routes
      //过滤掉静态路由
      let mianRoute = allRoutes.filter((item)=>item.name=='home')
      //解构
      mianRoute.forEach((item) => {
        item.children.forEach((itemChildren)=>{
          if (itemChildren.name == onRouteName){
            tabTitle.push(itemChildren)
          }
        })
      })
      // console.log("过滤后的路由结果===>",tabTitle)
      if (tabTitle.length>1 || tabTitle.length==1){
        return tabTitle[0].title
      }



    },

  },
  //匹配路由方法


},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
  changeAsideStatus(){
    let asideStatus = store.state.common.asideStatus
    return store.commit("onOrOffAside",!asideStatus)
  },
  loginout(){
  this.$http({
    url: 'sys/loginOut',
    method: 'post',
    data:this.$http.adornData({
      userId: sessionStorage.getItem("userId")
    })
  }).then((res)=>{

    sessionStorage.clear();
    console.log("session数据",sessionStorage.getItem("userId"),sessionStorage.getItem("roleId"))
    store.commit("setMenuList",null)
    this.$router.push('/login')
  })

  }




},
//声明周期 - 创建完成（可以访问当前this实例）
created() {

},
//声明周期 - 挂载完成（可以访问DOM元素）
mounted() {},
beforeCreate() {}, //生命周期 - 创建之前
beforeMount() {}, //生命周期 - 挂载之前
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped>
.l-content{
  float: left;
  margin-left: 5px;
}
.r-content{
  float: right;
  margin-right: 30px;
}
.hearderImg{
  width: 50px;
  height: 50px;
  border-radius: 15px;
  margin-top: 5px;
}
.el-dropdown-menu{
  text-align: center;
  margin: 0;
  padding: 0;
}
.el-button{
  margin-right: 30px;
  padding: 0;
}
i{
  font-size: 25px;
  width: 30px;
}
span{
  font-size: 25px;
}

</style>
